<template>
    <view class="uc-wrap uc-shop-shop">
        <ucHead :title="'商城'"></ucHead>
        <ucSearch></ucSearch>
        <view class="swiper-box">
            <swiper :indicator-dots="true" :autoplay="true" :circular="true" :interval="3000" :duration="500" class="banner" indicator-color="rgba(255, 255, 255, .3)" indicator-active-color="#010103" style="height: 420rpx;">
                <swiper-item v-for="(item,index) in banners" :key="index">
                    <view class="swiper-item">
                        <navigator url="">
                            <image :src="item" mode="aspectFill"></image>
                        </navigator>
                    </view>
                </swiper-item>
            </swiper>
        </view>
        <view class="swiper-box-more">
            <scroll-view scroll-x="true" class="scrollViewX" scroll-with-animation="true">
                <!-- <navigator class="item" url="" hover-class="none" v-for="item in CategoryList" :key="item.id" @click="openCategory(item)">
                    <view class="img">
                        <image :src="item.categoryFileUrl" mode="aspectFill"></image>
                    </view>
                    <view class="txt">{{item.categoryName}}</view>
                </navigator> -->
				<view class="item"  hover-class="none" v-for="item in CategoryList" :key="item.id" @click="openCategory(item)">
				    <view class="img">
				        <image :src="item.categoryFileUrl" mode="aspectFill"></image>
				    </view>
				    <view class="txt">{{item.categoryName}}</view>
				</view>
            </scroll-view>
        </view>
        <view class="box">
            <view class="title">
                <view class="name">主推商品</view>
                <!-- <navigator class="more" url="" hover-class="none">更多 <text class="uc-font uc-arrow-right"></text></navigator> -->
            </view>
            <view class="three"> 
				<template v-for="(item,index) in CategoryOneObj.itemDtoList" :key="index">
					<view   v-if="index < 3"  :class="index == 0?'item i1':index == 1?'item i2':'item i3'" @click="clickItem(item)">
						<image :src="item.itemMainImg" mode="widthFix"></image>
					</view>
				</template>
            </view>
        </view>
		<view class="box">
		    <view class="title">
		        <view class="name">{{CategoryOneObj.typeName}}</view>
		    </view>
		    <view class="list">
		        <view class="item"  v-for="item in CategoryOneObj.itemDtoList" :key="index" @click="clickItem(item)" >
		            <view class="img">
		                <image :src="item.itemMainImg" mode="aspectFill"></image>
		            </view>
		            <view class="name">{{item.itemName}}</view>
		            <view class="price">￥{{item.itemPrice}} <text class="uc-gray">售价</text></view>
		        </view>
		    </view>
		</view>
<!--        <view class="box">
            <view class="title">
                <view class="name">极米商用投影仪</view>
            </view>
            <view class="list">
                <navigator class="item" url="" hover-class="none">
                    <view class="img">
                        <image src="https://my.bziyun.com/20250619/shop-img-2-1_1750323796682.png" mode="aspectFill"></image>
                    </view>
                    <view class="name">极米青柠MH2</view>
                    <view class="price uc-gray">价格面议</view>
                </navigator>
                <navigator class="item" url="" hover-class="none">
                    <view class="img">
                        <image src="https://my.bziyun.com/20250619/shop-img-2-2_1750323845235.png" mode="aspectFill"></image>
                    </view>
                    <view class="name">极米青柠MH2</view>
                    <view class="price uc-gray">价格面议</view>
                </navigator>
            </view>
        </view> -->

        <!-- <view class="box">
            <view class="title">
                <view class="name">青柠投影幕布</view>
            </view>
            <view class="list">
                <navigator class="item" url="" hover-class="none">
                    <view class="img">
                        <image src="https://my.bziyun.com/20250619/shop-img-3-1_1750323895960.png" mode="aspectFill"></image>
                    </view>
                    <view class="name">极米青柠MH2</view>
                    <view class="price uc-gray">价格面议</view>
                </navigator>
                <navigator class="item" url="" hover-class="none">
                    <view class="img">
                        <image src="https://my.bziyun.com/20250619/shop-img-3-2_1750323960804.png" mode="aspectFill"></image>
                    </view>
                    <view class="name">极米青柠MH2</view>
                    <view class="price uc-gray">价格面议</view>
                </navigator>
                <navigator class="item" url="" hover-class="none">
                    <view class="img">
                        <image src="https://my.bziyun.com/20250619/shop-img-3-1_1750323895960.png" mode="aspectFill"></image>
                    </view>
                    <view class="name">极米青柠MH2</view>
                    <view class="price uc-gray">价格面议</view>
                </navigator>
                <navigator class="item" url="" hover-class="none">
                    <view class="img">
                        <image src="https://my.bziyun.com/20250619/shop-img-3-2_1750323960804.png" mode="aspectFill"></image>
                    </view>
                    <view class="name">极米青柠MH2</view>
                    <view class="price uc-gray">价格面议</view>
                </navigator>
            </view>
        </view> -->
    </view>
<!--    <navigator class="g-fixedCart" url="" hover-class="none">
        <image src="@/static/images/icon-cart.png" mode="widthFix" class="uc-icon40"></image>
        购物车
    </navigator>
    <navigator class="g-fixedService" url="" hover-class="none">
        <view class="face">
            <image src="https://my.bziyun.com/20250619/face_1750325367141.png" mode="aspectFill"></image>
        </view>
        <view class="txt">咨询</view>
    </navigator> -->
    <ucFoot :selectIndex="1"></ucFoot>
</template>
<script setup>
    import { ref } from 'vue'
	import { useMainStore } from '@/store/index.js'
	const mainStore= useMainStore();
	
	//获取分类信息
	const CategoryList = ref(null)
	const getqueryCategoryInfo = ()=>{
		uni.request({
			url: `https://muyin-pc.51wephone.cn/app-api/item/queryCategory`, 
			method: 'GET', 
			data: { 
			},
			header:{
				"TOKEN":mainStore.userInfo.token ||"9228b93fc98d4c3f9a25303aa2468bb1",
			},
			success: (res) => {
				console.log('请求成功:', res.data);
				CategoryList.value = res.data.data
			},
			fail: (err) => {
				console.error('请求失败:', err);
			}
		});
	}
	getqueryCategoryInfo()
	
	
	const CategoryInfo = ref(null) //所有详情数据
	const CategoryOneObj = ref(null)
	const getqueryCategoryInfoObj = ()=>{
		uni.request({
			url: `https://muyin-pc.51wephone.cn/app-api/item/queryMainItem`, 
			method: 'GET', 
			data: { 
			},
			header:{
				"TOKEN":mainStore.userInfo.token ||"9228b93fc98d4c3f9a25303aa2468bb1",
			},
			success: (res) => {
				console.log('请求成功:', res.data);
				CategoryInfo.value = res.data.data
				CategoryOneObj.value = res.data.data.length>0?res.data.data[0]:{}
				if(res.data.data.length>0){
					banners.value = []
					res.data.data[0].itemDtoList.forEach((item)=>{
						banners.value.push(...item.itemTopPicList)
					})
				}
			},
			fail: (err) => {
				console.error('请求失败:', err);
			}
		});
	}
	
	getqueryCategoryInfoObj()
	
	
	const openCategory = (item)=>{
		CategoryOneObj.value = CategoryInfo.value.find(items=> item.id == items.typeId)
		console.log(CategoryOneObj.value ,CategoryInfo.value);
		// getqueryCategoryInfoObj()
	}
	//跳转详情
	const clickItem = (item)=>{
		console.log("irem",item);
		uni.navigateTo({
		    url: `/pages/product/detail?id=${item.id}&title=${item.itemName}` // 注意路径写法，从pages目录开始写起，且文件名首字母大写，后缀为.vue的文件名部分。
		});
	}



    const banners = ref([
            'https://my.bziyun.com/20250619/shop-banner_1750323608862.png',
            'https://my.bziyun.com/20250619/shop-banner_1750323608862.png',
            'https://my.bziyun.com/20250619/shop-banner_1750323608862.png',
            'https://my.bziyun.com/20250619/shop-banner_1750323608862.png',
        ])
</script>